<template>
  <div id="free_record">
    <div class="bg"></div>
    <!-- 幸运免单 -->
    <div class="free_name"><img src="../../../assets/images/free_of_charge/lucky_free.png" alt="" /></div>
    <div class="luck_draw">
      <!-- <h1>剩余抽奖次数：{{ num }}</h1> -->
      <div class="outline"><img src="../../../assets/images/free_of_charge/outline.png" alt="" /></div>
      <round-turntable
        ref="roundTurntable"
        :prizeData="prizeData"
        :rotateCircle="rotateCircle"
        :duringTime="duringTime"
        :turntableStyleOption="turntableStyleOption"
        @endRotation="endRotation"
        class="turntable"
      >
        <template slot="item" slot-scope="scope">
          <div class="turntable-name">{{ scope.item.prizeName }}</div>
          <!-- <div class="turntable-img">
            <img :src="scope.item.prizeImg" />
          </div> -->
        </template>
      </round-turntable>
      <div @click="startRotation" class="pointer"></div>

      <!-- 恭喜获得免单机会 -->
      <!-- <van-button type="primary" text="显示遮罩层" @click="gooodsShow = true" />
      <van-button type="primary" text="显示遮罩层" @click="oneShow = true" /> -->
        <!-- 免单商品 -->
      <van-overlay :show="gooodsShow" @click="gooodsShow = false">
        <div class="wrapper" @click.stop style="color: #fff; position: absolute; top: 18%;">
          <img src="../../../assets/images/free_of_charge/popup.png" alt="" ></img>
         <div class="goodsDetail">
           <span class="title">恭喜获得免单机会</span>
           <!-- <span class="operation">完成一下任务获得免单</span>
           <span class="recommen"><span>3</span>天内直推<span>3</span>位好友</span> -->
           <span class="free_store">免单商品</span>
           <div class="goods">
              <div class="detail" v-for="item in dividendList">
                  <img :src="item.goods.thumb" alt="">
                  <span class="introduce">{{item.goods.title}}</span>
                  <span class="num">数量:1</span>
              </div>
           </div>
         </div>
         <div class="icon_context_goods" @click="close">
           <van-icon name="circle" class="circle"/>
           <van-icon name="cross" class="cross"/>
         </div>
        </div>
      </van-overlay>

      <!-- 恭喜获得免单机会  -->
      <van-overlay :show="oneShow" @click="oneShow = false">
        <div class="wrapper" @click.stop style="color: #fff; position: absolute; top: 8%;">
          <img src="../../../assets/images/free_of_charge/popup.png" alt="" class="img_one"></img>
         <div class="oneDetail">
           <span class="title">恭喜获得免单机会</span>
           <span class="operation">完成以下任务获得免单</span>
           <span class="recommen"><span>{{taskList.people_num}}</span>天内直推<span>{{taskList.completed_people_num}}</span>位好友</span>
           <span class="free_store">免单商品</span>
           <div class="goods">
              <div class="detail" v-for="item in dividendList">
                  <img :src="item.goods.thumb" alt="">
                  <span class="introduce">{{item.goods.title}}</span>
                  <span class="num">数量:1</span>
              </div>
           </div>
         </div>
         <div class="icon_context_one" @click="close">
           <van-icon name="circle" class="circle"/>
           <van-icon name="cross" class="cross"/>
         </div>
        </div>
      </van-overlay>

      <!-- 谢谢参与 -->
      <van-overlay :show="show" @click="show = false">
        <div class="wrapper" @click.stop style="color: #fff;">
          <img src="../../../assets/images/free_of_charge/popup.png" alt="" style="height: 18rem;"></img>
         <div class="detail">
            <span class="name">谢谢参与</span>
            <span class="determine" @click="close">确定</span>
         </div>
         <div class="icon_context" @click="close">
           <van-icon name="circle" class="circle"/>
           <van-icon name="cross" class="cross"/>
         </div>
        </div>
      </van-overlay>
    </div>
  </div>
</template>

<script>
import free_lottery_controller from "./free_lottery_controller";

export default free_lottery_controller;
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
#free_record {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin: 0;
  padding: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-position: center;
  background-image: url("../../../assets/images/free_of_charge/free_bgk.png");
  background-size: 100% auto;
  background-repeat: no-repeat;
  height: 100vh;

  .bg {
    position: absolute;
    background-image: linear-gradient(0deg, #ff6d61 0%, #ffaa37 100%);
    height: 100vh;
    width: 100%;
    left: 0;
    top: 0;
    z-index: -1;
  }

  .free_name {
    img {
      position: relative;
      left: 3%;
      top: -44%;
      width: 17.25rem;
      height: 5.75rem;
    }
  }

  .luck_draw {
    .outline {
      img {
        width: 18.5rem;
        height: 18.5rem;
        position: relative;
        left: 0;
        top: -1.5rem;
      }
    }
  }

  .turntable {
    // position: absolute;
    // left: calc(50% - 200px);
    // top: calc(50% - 200px);
    // width: 400px;
    // height: 400px;
    position: absolute;
    left: calc(50% - 6.98rem);
    top: calc(50% - 5.59rem);
  }

  .turntable-name {
    position: absolute;
    left: 10px;
    top: 20px;
    width: calc(100% - 20px);
    font-size: 12px;
    text-align: center;
    color: #462f2f;
    font-weight: bold;
  }

  .turntable-img {
    position: absolute;
    left: calc(50% - 80px / 2);
    top: 60px;
    width: 80px;
    height: 80px;

    img {
      display: inline-block;
      width: 100%;
      height: 100%;
    }
  }

  .pointer {
    position: absolute;
    // left: calc(50% - 36px);
    // top: calc(50% - 43px);
    left: 40.3%;
    top: 43.8%;
    width: 6.3rem;
    height: 6.3rem;
    background-image: url("../../../assets/images/free_of_charge/lucky_draw.png");
    background-size: contain;
    background-repeat: no-repeat;
  }

  .van-overlay {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .wrapper {
    img {
      width: 20rem;
      height: 21rem;
    }

    .goodsDetail {
      display: flex;
      flex-direction: column;
      position: relative;
      right: 0;
      bottom: 16rem;

      .title {
        font-size: 25px;
        margin-bottom: 1.25rem;
      }

      .operation {
        font-size: 16px;
        margin-bottom: 0.5rem;
      }

      .recommen {
        font-size: 22px;
        margin-bottom: 1.57rem;

        span {
          font-size: 26px;
          margin: 0 0.2rem;
        }
      }

      .free_store {
        font-size: 18px;
        margin-bottom: 0.5rem;
      }

      .goods {
        width: 16.5rem;
        height: 9.1rem;
        background-color: #fff;
        border-radius: 0.36rem;
        position: relative;
        left: 7%;
        display: flex;
        overflow-x: scroll;
        overflow-y: hidden;

        .detail {
          color: black;
          text-align: left;
          padding: 0.3rem;

          img {
            width: 5.71rem;
            height: 5.71rem;
            margin: 0;
          }

          .introduce {
            width: 5.71rem;
            color: #202020;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            word-break: break-all;
            overflow: hidden;
            margin-top: 0.3rem;
          }

          .num {
            color: #999999;
          }
        }
      }
    }

    .img_one {
      width: 20rem;
      height: 27rem;
    }

    .oneDetail {
      display: flex;
      flex-direction: column;
      position: relative;
      right: 0;
      bottom: 20.5rem;

      .title {
        font-size: 25px;
        margin-bottom: 1.25rem;
      }

      .operation {
        font-size: 16px;
        margin-bottom: 0.5rem;
      }

      .recommen {
        font-size: 22px;
        margin-bottom: 1.17rem;

        span {
          font-size: 26px;
          margin: 0 0.2rem;
        }
      }

      .free_store {
        font-size: 18px;
        margin-bottom: 0.5rem;
      }

      .goods {
        width: 16.5rem;
        height: 9.1rem;
        background-color: #fff;
        border-radius: 0.36rem;
        position: relative;
        left: 7%;
        display: flex;
        overflow-x: scroll;
        overflow-y: hidden;

        .detail {
          color: black;
          text-align: left;
          padding: 0.3rem;

          img {
            width: 5.71rem;
            height: 5.71rem;
            margin: 0;
          }

          .introduce {
            width: 5.71rem;
            color: #202020;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            word-break: break-all;
            overflow: hidden;
            margin-top: 0.3rem;
          }

          .num {
            color: #999999;
          }
        }
      }
    }
    .detail {
      display: flex;
      flex-direction: column;

      .name {
        position: relative;
        right: 0;
        display: block;
        bottom: 9rem;
        color: #ffffff;
        font-size: 24px;
      }

      .determine {
        width: 65%;
        position: relative;
        left: 16%;
        display: block;
        bottom: 6rem;
        color: #ffffff;
        font-size: 20px;
        background: #fad754;
        padding: 0.31rem 0;
        border-radius: 1rem;
      }
    }

    .icon_context_goods {
      position: relative;

      .circle {
        font-size: 32px;
        position: absolute;
        bottom: 11rem;
        left: 45%;
      }

      .cross {
        font-size: 24px;
        position: absolute;
        bottom: 11.3rem;
        left: 46.3%;
      }
    }

    .icon_context_one {
      position: relative;

      .circle {
        font-size: 32px;
        position: absolute;
        bottom: 16rem;
        left: 45%;
      }

      .cross {
        font-size: 24px;
        position: absolute;
        bottom: 16.3rem;
        left: 46.3%;
      }
    }

    .icon_context {
      position: relative;

      .circle {
        font-size: 32px;
        position: absolute;
        top: -2rem;
        left: 45%;
      }

      .cross {
        font-size: 24px;
        position: absolute;
        top: -1.8rem;
        left: 46.3%;
      }
    }
  }
}
</style>
